<template>
  <div class="task-list">
    <page-header>
      <el-switch
        active-color="#13ce66"
        inactive-color="#ff4949"
        v-model="is_patrol"
        :inactive-value="2"
        :active-value="1"
        active-text="已巡查"
        inactive-text="未巡查"
        @change="isPatrolChange"
      ></el-switch>
    </page-header>
    <page-main>
      <template v-if="showAddTask">
        <el-button type="primary" plain @click="addTask" class="add-task-btn"
          >添加任务</el-button
        >
      </template>
      <el-table :data="taskData">
  
        <el-table-column label="任务名称" prop="name"> </el-table-column>
        <el-table-column label="网格名称" prop="area_name"> </el-table-column>
        <el-table-column label="网格员" prop="realname"> </el-table-column>
        <el-table-column label="网格员电话" prop="phone"> </el-table-column>
        <el-table-column
          label="社会单位名称"
          prop="unit_name"
        ></el-table-column>
        <el-table-column label="是否有隐患" prop="is_danger">
          <template #default="scope">
            <span>{{ scope.row.is_danger == 0 ? "无" : "有" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否有故障" prop="is_fault">
          <template #default="scope">
            <span>{{ scope.row.is_fault == 0 ? "无" : "有" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="add_time"
          :formatter="formatDate"
        >
        </el-table-column>
        <el-table-column
          label="开始时间"
          prop="start_time"
          :formatter="formatDate"
        >
        </el-table-column>
        <el-table-column
          label="完成时间"
          prop="finish_time"
          :formatter="formatDate"
        >
        </el-table-column>
        <el-table-column
          label="结束时间"
          prop="end_time"
          :formatter="formatDate"
        >
        </el-table-column>
        <!-- <el-table-column width="200" label="操作">
          <template #header>
            <el-button
              type="primary"
              size="mini"
              @click="addTasklVisible = true"
              >添加</el-button
            >
          </template>
          <template #default="scope">
            <div>
              <el-button size="mini" @click="showTaskDetail(scope.row)"
                >查看</el-button
              >
              <el-button size="mini" type="danger" @click="delTask(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <el-dialog
        v-model="taskDetailVisible"
        width="50%"
        @close="closeDialog"
        :close-on-click-modal="false"
        destroy-on-close
      >
      </el-dialog>
      <el-dialog
        v-model="addTasklVisible"
        width="35%"
        @close="closeDialog"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <div>
          <el-form
            :label-position="labelPosition"
            label-width="auto"
            :model="formLabelAlign"
          >
            <el-form-item label="任务名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="时间选择">
              <el-date-picker
                v-model="formData.taskAddTime"
                type="daterange"
                @change="startEndDate"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="任务巡查人">
              <el-select
                v-model="value"
                filterable
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务巡查点">
              <el-select
                v-model="value"
                filterable
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in pointList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-fotm-item>
              <el-button type="primary" size="medium" @click="submit"
                >提交</el-button
              >
            </el-fotm-item>
          </el-form>
        </div>
      </el-dialog>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="taskDataInfo.page"
          :page-size="taskDataInfo.rows"
          :total="taskDataInfo.total"
          layout="total,prev, pager, next, jumper"
          background
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      taskData: [],
      taskDataInfo: "",
      opts: {},
      addTasklVisible: false,
      taskDetailVisible: false,
      showAddTask: false,
      //   formData: {
      //     taskAddTime: "",
      //   },
      value: [],
      pointList: [],
      is_patrol: 2, //1是2否
    };
  },
  created() {
    this.opts = Object.assign({}, this.opts, this.$route.query);
    this.initTaskList();
    // this.initInfo()//巡查点列表获取
  },
  methods: {
    isPatrolChange(e) {
      this.initTaskList();
    },
    formatDate(row, column, time, index) {
      if (time) {
        return new Date(parseInt(time) * 1000)
          .toLocaleString()
          .replace(/:\d{1,2}$/, " ");
      } else return "";
    },
    handleCurrentChange(e) {
      this.initTaskList(e);
    },
    startEndDate(e) {
      //   console.log(e);
    },
    initTaskList(page) {
      let pageData = {
        is_patrol: this.is_patrol,
        rows: 10,
      };
      if (page) {
        pageData.page = page;
      } else {
        pageData.page = 1;
      }
      let data = Object.assign(this.opts, pageData);
      this.$api.post("/unit/UnitTask/lists", data).then((res) => {
        this.taskData = res.data.lists;
        delete res.data.list;
        this.taskDataInfo = res.data;
      });
    },
    showTaskDetail() {
      //查看详细
      this.taskDetailVisible = true;
    },
    // delTask(data) {
    //   //删除任务
    //   this.$api.post("/unit/PatrolTask/delete", { id: data.id }).then((res) => {
    //     this.initTaskList();
    //   });
    // },
    addTask() {
      this.addTasklVisible = true;
    },
    submit() {
      let data = Object.assign(this.formData, this.opts);
      console.log(data);
      //   this.$api.post("/unit/PatrolTask/save", data).then((res) => {});
    },
  },
};
</script>
<style scoped lang="scss">
.add-task-btn {
    float: right;
}
.start-end-date {
    margin: 30px 0;
}
.add-btn-wrapper {
    display: flex;
    justify-content: space-around;
    padding: 30px 0 20px;
}
.el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 10px;
}
:deep(.el-cascader-panel .el-radio__input) {
    visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
}
.block {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
